{% extends "../component/_latout.html" %}
{% block style %}
<link href="/public/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

{% endblock %}
{% block content %}
<!--wrap-->
<div>
    <!--主体部分-->
    <div class="row">
        <div class="col-sm-12">
          <div class="ibox m-b-none float-e-margins">
              <div class="ibox-title">
                  <h5>文章-分类目录</h5>
                  <div class="ibox-tools">
                  </div>
              </div>
              <div class="ibox-content">
                <!--共多少篇文章-->
                <div class="ibox m-b-none">
                  {# <form method="get" class="form-horizontal">
                    <div class="clear">
                        <div class="input-group-container  pull-left">
                            <div class="input-group">
                                <input type="text" placeholder="请输入关键词" class="input-sm form-control">
                                <span class="input-group-btn m-b-none"><button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                        </div>
                        <div class="">
                              <button class="btn btn-primary " type="button">批量删除</button>
                        </div>
                      </div>
                  </form> #}
                </div>

                <!--添加新分类 ibox-content-->
                <div class="row m-t">
                  <div class="col-sm-4">
                    <div class="clearfix">
                        <form method="get" class="form-horizontal">
                          <div class="form-group">
                              <label class="col-sm-3 control-label">名称</label>

                              <div class="col-sm-9">
                                  <input type="text" class="form-control" placeholder="类型名称" id="name">
                              </div>
                          </div>
                          <div class="form-group">
                              <label class="col-sm-3 control-label">图像</label>
                              <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="图片链接" id="img">
                                    <div class="m-t hide" id="show_img">
                                        <img src="http://cs.101.com/v0.1/static/cscommon/avatar/948466/948466.jpg" width="64" height="64">
                                    </div>
                              </div>
                          </div>
                          <div class="form-group">
                            <label class="col-sm-3 control-label">父级分类</label>
                            <div class="col-sm-9">
                                <select class="form-control m-b" name="account" id="parentType">
                                    <option value="">请选择分类</option>
                                    {% for articleType in articleTypes %}
                                    <option value="{{ articleType.id }},{{articleType.parent_id}}" articleTypeId="{{ articleType.id }}">{{ articleType.name }}</option>
                                        {% if articleType.children.length !== 0 %}
                                        {% for subarticleType in articleType.children %}
                                        <option value="{{ subarticleType.id }},{{subarticleType.parent_id}}" articleTypeId="{{ subarticleType.id }}">├─{{ subarticleType.name }}</option>
                                        {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                          </div>
                          <div class="form-group tx-c">
                            <label class="col-sm-3">
                                <button class="btn btn-primary hide" type="button" id="cancel_edit">取消编辑</button>    
                            </label>
                            <div class="col-sm-9">
                              <button class="btn btn-primary my-center-button" id="submitAddOrEdit" type="button">新增</button>
                              
                            </div>
                          </div>
                        </form>
                    </div>
                  </div>
                  <div class="col-sm-8 passege-right">
                    <!--表格-->
                    <div class="my-table ibox-content" >
                      <table class="table table-hover  m-b-none" >
                        <thead>
                            <tr>
                                {# <th class="bs-checkbox">
                                    <div class="th-inner ">
                                        <input name="btSelectAll" type="checkbox">
                                    </div>
                                    <div class="fht-cell"></div>
                                </th> #}
                                <th>
                                    <div class="th-inner ">层级</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th>
                                    <div class="th-inner ">名称</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th>
                                    <div class="th-inner ">图像描述</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th>
                                    <div class="th-inner ">操作</div>
                                    <div class="fht-cell"></div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for articleType in articleTypes %}
                            <tr>
                                {# <td class="bs-checkbox">
                                    <input name="btSelectItem" type="checkbox">
                                </td> #}
                                <td>1级</td>
                                <td class="text-success">{{ articleType.name }}</td>
                                <td class="text-success">
                                    {% if articleType.img %}
                                    <img src="{{articleType.img}}" width="40" height="40">
                                    {% else %}
                                    --
                                    {% endif %}
                                </td>
                                <td>
                                    <a  href="javascript:void(0)" 
                                        articleTypeId="{{ articleType.id }}" 
                                        parent_id="{{articleType.parent_id}}" 
                                        name="{{articleType.name}}"
                                        img="{{articleType.img}}"
                                        class="edit_type">编辑</a>
                                    {# <a href="javascript:void(0)" articleTypeId="{{ articleType.id }}" class="delete_type" >删除</a> #}
                                    {# <div class="dropdown">
                                        <div class="dropdown-toggle" data-toggle="dropdown">
                                        <span class="fa fa-ellipsis-h"></span>
                                        </div>
                                        <ul class="dropdown-menu my-dropmenu" role="menu">
                                            <li><a href="javascript:void(0)" articleTypeId="{{ articleType.id }}">编辑</a></li>
                                            <li><a href="javascript:void(0)" articleTypeId="{{ articleType.id }}" >删除</a></li>
                                        </ul>
                                    <div> #}
                                </td>
                            </tr>
                                {% if articleType.children.length !== 0 %}
                                {% for subarticleType in articleType.children %}
                                <tr>
                                    {# <td class="bs-checkbox">
                                        <input name="btSelectItem" type="checkbox">
                                    </td> #}
                                    <td>2级</td>
                                    <td class="text-success">├─ {{ subarticleType.name }}</td>
                                    <td class="text-success">
                                        {% if subarticleType.img %}
                                        <img src="{{subarticleType.img}}" width="40" height="40">
                                        {% else %}
                                        --
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a  href="javascript:void(0)" 
                                            articleTypeId="{{ subarticleType.id }}" 
                                            parent_id="{{subarticleType.parent_id}}" 
                                            name="{{subarticleType.name}}"
                                            img="{{subarticleType.img}}"
                                            class="edit_type">编辑</a>
                                        <a href="javascript:void(0)"  articleTypeId="{{ subarticleType.id }}" class="delete_type" >删除</a>
                                        {# <div class="dropdown">
                                            <div class="dropdown-toggle" data-toggle="dropdown">
                                            <span class="fa fa-ellipsis-h"></span>
                                            </div>
                                            <ul class="dropdown-menu my-dropmenu" role="menu">
                                                <li><a href="javascript:void(0)" articleTypeId="{{ subarticleType.id }}">编辑</a></li>
                                                <li><a href="javascript:void(0)"  articleTypeId="{{ subarticleType.id }}">删除</a></li>
                                            </ul>
                                        <div> #}
                                    </td>
                                </tr>
                                    {% if subarticleType.children.length !== 0 %}
                                    {% for thirdarticleType in subarticleType.children %}
                                    <tr>
                                        {# <td class="bs-checkbox">
                                            <input name="btSelectItem" type="checkbox">
                                        </td> #}
                                        <td>3级</td>
                                        <td class="text-success">├─├─ {{ thirdarticleType.name }}</td>
                                        <td class="text-success">
                                            {% if thirdarticleType.img %}
                                            <img src="{{thirdarticleType.img}}" width="40" height="40">
                                            {% else %}
                                            --
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a  href="javascript:void(0)" 
                                                articleTypeId="{{ thirdarticleType.id }}"
                                                parent_id="{{thirdarticleType.parent_id}}" 
                                                name="{{thirdarticleType.name}}"
                                                img="{{thirdarticleType.img}}"
                                                class="edit_type" >编辑</a>
                                            <a href="javascript:void(0)"  articleTypeId="{{ thirdarticleType.id }}" class="delete_type" >删除</a>
                                            {# <div class="dropdown">
                                                <div class="dropdown-toggle" data-toggle="dropdown">
                                                <span class="fa fa-ellipsis-h"></span>
                                                </div>
                                                <ul class="dropdown-menu my-dropmenu" role="menu">
                                                    <li><a href="javascript:void(0)" articleTypeId="{{ thirdarticleType.id }}">编辑</a></li>
                                                    <li><a href="javascript:void(0)"  articleTypeId="{{ thirdarticleType.id }}">删除</a></li>
                                                </ul>
                                            <div> #}
                                        </td>
                                    </tr>
                                    {% endfor %} 
                                    {% endif %}
                                {% endfor %}
                                {% endif %}
                            {% endfor %}
                            
                        </tbody>
                      </table>
                    </div>
                    <!--/表格-->
                  </div>
                </div>
                <!--添加新分类-->
              </div>
          </div>
        </div>
    </div>
    <!--/主体部分-->
</div>

{% endblock %} 
{% block script %}
<script src="/public/admin/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/public/admin/js/common/articleType/list.js"></script>
{% endblock %} 
